<template>
	<view class="bgc">
		<!-- #ifdef MP -->
		<view class="banner">
			<open-data class="BackgroundImage" type="userAvatarUrl"></open-data>
			<open-data class="picture" type="userAvatarUrl"></open-data>
			<open-data class="name" type="userNickName"></open-data>
		</view>
		<!-- #endif -->
		<view class="list" v-for="(itemx,index) in myorder" :key="index">
			<view class="Myorder" v-for="(itemy,indey) in itemx.main" @click="jump(index,indey)" :key="indey">
				<view>
					<image :src="itemy.image"></image>
				</view>
				<view>{{itemy.text}}</view>
			</view>
		</view>
		<footer-index></footer-index>
		<view class='durk' v-show="showModel" @tap="show">
			<view class='modalContent' @tap.stop="noClose">
				<view class='title'>联系电话</view>
				<view class="x" @tap="show"></view>
				<view class="line"></view>
				<view class='contents' @tap="copyPhone">{{phone}}</view>
				<view class="icon" @tap="callPhone">
					<image src="/static/assets/my/icon.png"></image>
				</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<login-by-pc v-if="!loginState" @showOrHide="showOrHide"></login-by-pc>
		<!-- #endif -->
	</view>
</template>

<script>
	import { getPhone } from '@/service/personal.js';
	import footerIndex from '@/components/footer/footer.vue'
	// #ifdef H5
		import loginByPc from '@/components/loginByPc/loginByPc.vue'
	// #endif
	export default {
		name: "My",
		components: {
			footerIndex
			// #ifdef H5
			,loginByPc
			// #endif
		},
		data() {
			return {
				phone: '',
				myorder: [{
						main: [{
							image: "/static/assets/my/p3.png",
							text: "我的订单"
						}, {
							image: "/static/assets/my/p4.png",
							text: "联系客服"
						}]
					},
					{
						main: [{
							image: "/static/assets/my/p5.png",
							text: "技术支持"
						}]
					}
				],
				showModel: false
				// #ifdef H5
				,loginState: true
				// #endif
			}
		},
		onLoad() {
			if (uni.getStorageSync('phone')) {
				this.phone = uni.getStorageSync('phone')
			}
		},
		methods: {
			// #ifdef H5
			showOrHide() {
				this.loginState = !this.loginState
			},
			// #endif
			noClose() { // 阻止弹窗关闭
				return false
			},
			show() { //显示/隐藏模态框
				this.showModel = !this.showModel
			},
			callPhone() { // 拨打电话
				uni.makePhoneCall({ phoneNumber: this.phone});
			},
			copyPhone() { // 复制号码
				uni.setClipboardData({
					data: this.phone,
					success: res => {
						uni.showToast({title: '复制号码成功'})
					}
				})
			},
			_getPhone() { // 获取电话号码
				if (!this.phone) {
					getPhone().then(res => {
						this.phone = res.data.phone
						uni.setStorageSync('phone', res.data.phone)
						this.show()
					})
				} else {
					this.show()
				}
			},
			jump(ParIndex, index) { // 列表点击事件
				if (this.getToken(true)) { // 有token再获取数据
					if (Number(ParIndex) == 0) {
						switch (Number(index)) {
							case 0:
								uni.navigateTo({url: '../order/order'})
								break;
							default:
								this._getPhone()
								break;
						}
					}
				} else {
					// #ifdef H5
						uni.showModal({
							title: '提示',
							content: '您当前尚未登录，是否登录',
							success:res=> {
								res.confirm?this.showOrHide():''
							}
						})
					// #endif
					// #ifdef MP
						this.token(res => {
							res?this.jump(ParIndex, index):''  // 成功时重新请求
						})
					// #endif
				}
			}
		}
	}
</script>

<style>
	.bgc {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: fixed;
	}

	.banner {
		width: 750rpx;
		height: 300rpx;
		position: relative;
	}

	.BackgroundImage {
		width: 750rpx;
		height: 300rpx;
	}

	.picture {
		width: 164rpx;
		height: 164rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: auto;
		text-align: center;
		border-radius: 50%;
		overflow: hidden;
	}

	.name {
		position: absolute;
		color: #fff;
		font-size: 46rpx;
		left: 0;
		top: 230rpx;
		right: 0;
		bottom: 0;
		text-align: center;
	}

	.list {
		width: 710rpx;
		border-radius: 20rpx;
		margin: 20rpx 18rpx 0;
		background-color: #fff;
		/* padding: 0 20rpx; */
	}

	.list>view {
		height: 96rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #dfdfdf;
		margin: 0 20rpx;
		font-size: 32rpx;
		color: rgba(102, 102, 102, 1);
	}

	.list>view:last-child {
		border-bottom: 0rpx;
	}

	.Myorder image {
		width: 40rpx;
		height: 40rpx;
		margin: 30rpx 40rpx;
		border: 1rpx dashed rgba(102, 102, 102, 1);
	}

	.icon image {
		width: 100rpx;
		height: 100rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
	}

	.modalContent {
		border-radius: 40rpx;
		height: 418rpx;
		width: 670rpx;
		margin: 0 auto;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		text-align: center;
	}

	.title {
		margin-top: 58rpx;
		height: 48rpx;
		line-height: 48rpx;
		color: #666;
		font-size: 28rpx;
	}

	.contents {
		font-size: 36rpx;
		height: 48rpx;
		font-weight: 500;
		line-height: 50rpx;
		margin: 44rpx auto 72.63rpx auto;
	}

	.line {
		width: 572rpx;
		border-bottom: 2rpx solid #999;
		margin: 13rpx auto 31rpx;
	}

	.x {
		position: absolute;
		width: 22rpx;
		height: 22rpx;
		right: 53.1rpx;
		top: 55.2rpx;
	}

	.x::before {
		content: '';
		width: inherit;
		border-top: 1px solid #999;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.x::after {
		content: '';
		width: inherit;
		border-top: 1px solid #999;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.buttom {
		position: absolute;
		left: 90rpx;
		bottom: -90rpx;
	}
</style>
